<template>
  <div>
     <i-form ref="myForm" :dataForm="dataForm"></i-form>
     <a-button @click="onsubmit">提交</a-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { IForm } from '@/entry.esm'
import { FormInterFace } from '@/IForm/src/IFormInterFace'
// import { SeniorSearchInterFace } from '@/ISeniorSearch/src/ISeniorSearchInterface'
export default defineComponent({
  name: 'app',
  setup () {
    const myForm = ref()
    const dataForm: FormInterFace<any> = reactive({
      labelWidth: 80, // 文本宽度
      form: {
        id: '',
        appId: '',
        appName: '',
        appSecret: '',
        appDesc: '',
        iconPath: '',
        verify: '0',
        status: '0',
        platform: 'pc',
        routerType: 'router'
      },
      fieldDataList: [
        {
          type: 'treeSelect', // form表单类型
          label: '关联城市', // 字段描述信息
          field: 'orgAreaList', // form 对应字段
          dataList: [{ id: 21, provinceCode: 0, code: 460000, name: '海南省', disable: false, children: [{ id: 235, provinceCode: 460000, code: 460100, name: '海口市', disable: false }, { id: 236, provinceCode: 460000, code: 460200, name: '三亚市', disable: false }, { id: 237, provinceCode: 460000, code: 469000, name: '省直辖县级行政单位', disable: false }] }, { id: 22, provinceCode: 0, code: 500000, name: '重庆市', disable: false, children: [{ id: 238, provinceCode: 500000, code: 500100, name: '重庆市', disable: false }] }],
          options: {
            replaceFields: {
              label: 'name',
              value: 'code'
            },
            showCheckedStrategy: 'SHOW_ALL'
          }
        },
        {
          type: 'input', // form表单类型
          label: '应用ID', // 字段描述信息
          field: 'appId', // form 对应字段
          rules: [
            {
              required: true,
              message: '请输入应用ID',
              trigger: 'blur'
            }
          ],
          options: {
            maxlength: 20
          }
        },
        {
          type: 'input', // form表单类型
          label: '应用名称', // 字段描述信息
          field: 'appName', // form 对应字段
          rules: [
            {
              required: true,
              message: '请输入应用名称',
              trigger: 'blur'
            }
          ],
          options: {
            maxlength: 30
          }
        },
        {
          type: 'input', // form表单类型
          label: 'appSecret', // 字段描述信息
          field: 'appSecret', // form 对应字段
          rules: [
            {
              required: true,
              message: '请输入appSecret',
              trigger: 'blur'
            }
          ],
          options: {
            maxlength: 30
          }
        },
        {
          type: 'input', // form表单类型
          label: '应用图标', // 字段描述信息
          field: 'iconPath', // form 对应字段
          options: {
            maxlength: 30
          }
        },
        {
          type: 'select', // form表单类型
          label: '平台', // 字段描述信息
          field: 'platform', // form 对应字段
          dataList: [
            {
              label: 'PC端',
              value: 'pc'
            },
            {
              label: '移动端',
              value: 'mobile'
            }
          ]
        },
        {
          type: 'select', // form表单类型
          label: '路由方式', // 字段描述信息
          field: 'routerType', // form 对应字段
          dataList: [
            {
              label: '项目内跳转',
              value: 'router'
            },
            {
              label: '新窗口',
              value: '_blank'
            }
          ]
        },
        {
          type: 'radio', // form表单类型
          label: '是否启用', // 字段描述信息
          field: 'status', // form 对应字段
          dataList: [
            {
              label: '正常',
              value: '0'
            },
            {
              label: '停用',
              value: '1'
            }
          ]
        },
        {
          type: 'radio', // form表单类型
          label: '是否验证', // 字段描述信息
          field: 'verify', // form 对应字段
          dataList: [
            {
              label: '不验证',
              value: '0'
            },
            {
              label: '验证',
              value: '1'
            }
          ]
        },
        {
          type: 'textarea', // form表单类型
          label: '应用描述', // 字段描述信息
          field: 'appDesc', // form 对应字段
          options: {
            maxlength: 200
          }
        }
      ]
    })
    const onsubmit = async () => {
      await myForm.value.onSubmit().then(async (res: any) => {
        console.log(res)
      }).catch(() => console.log('123'))
    }
    return {
      onsubmit,
      dataForm,
      myForm
    }
  },
  components: {
    IForm
  }
})
</script>
